<template>
  <el-input class="input-group-container" type="text" v-model="inputValue" :placeholder="placeholder" :maxlength="maxLength" :size="size" @change="onInputChange">
    <el-select slot="prepend" :style="{ width: prependWidth }" v-model="prependValue" placeholder="请选择" @change="onPrependChange">
      <el-option v-for="(item, index) in prependOptions" :key="index" :value="item[optionValue]" :label="item[optionLabel]"></el-option>
    </el-select>
  </el-input>
</template>

<script>
import isArray from 'lodash/isArray';

export default {
  name: 'base-input-group',
  model: {
    prop: 'groups',
    event: 'change',
  },
  props: {
    groups: null,
    placeholder: {
      type: String,
      default: '请输入',
    },
    size: {
      type: String,
      default: '',  // medium | small | mini
    },
    maxLength: {
      type: Number,
      default: 20,
    },
    prependWidth: {
      type: String,
      default: '120px',
    },
    prependOptions: {
      type: Array,
    },
    optionValue: {
      type: String,
      default: 'value',
    },
    optionLabel: {
      type: String,
      default: 'label',
    },
  },
  data() {
    return {
      inputValue: '',
      prependValue: '',
    };
  },
  watch: {
    groups: {
      handler(val) {
        if (isArray(val)) {
          this.prependValue = val[0];
          this.inputValue = val[1];
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 输入框前置下拉内容选择回调
     * @param val
     */
    onPrependChange(val) {
      this.inputValue = '';
      this.$emit('change', [val, this.inputValue]);
    },

    /**
     * 输入框回调
     * @param val
     */
    onInputChange(val) {
      this.$emit('change', [this.prependValue, val]);
    },
  },
};
</script>

<style lang="scss" scoped>
.input-group-container {
  /deep/ .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
